<template>
  <div class="ques-report">
    <div class="ques-report-title">
      <div class="title-text">
        问卷标题：
        <el-input class="input-write" v-model="title"></el-input>
        <el-button @click="quesReport" type="warning" class="right-report"
          >发布问卷</el-button
        >
        <div class="min-prompt" v-show="showTitle">
          请输入3到15字问卷标题
        </div>
        <!-- <div class="min-prompt" v-show="showTitle">
          请输入3到15字问卷标题
        </div> -->
      </div>
    </div>
    <div class="ques-report-content">
      <div class="ques-content-left">
        <div>
          <div class="ques-sort">1.单选项</div>
          <div>
            <div
              class="ques-option"
              v-for="(item, index) in optionOneAll.filter(
                (s) => s.sort == '单'
              )"
              :key="index"
            >
              ({{ index + 1 }}){{ item.title }}
            </div>
          </div>
          <!-- <div class="ques-option">(1)如何看待社区卫生</div>
          <div class="ques-option">(1)如何看待社区卫生</div> -->
        </div>
        <div>
          <div class="ques-sort">2.多选项</div>
          <div
            class="ques-option"
            v-for="(item, index) in optionOneAll.filter((s) => s.sort == '多')"
            :key="index"
          >
            ({{ index + 1 }}){{ item.title }}
          </div>
        </div>
        <div>
          <div class="ques-sort">3.填空项</div>
          <div
            class="ques-option"
            v-for="(item, index) in optionOneAll.filter((s) => s.sort == '填')"
            :key="index"
          >
            ({{ index + 1 }}){{ item.title }}
          </div>
        </div>
      </div>
      <div class="ques-content-right">
        <div class="right-sort">
          <el-radio-group v-model="radioSort" @change="radioName">
            <el-radio-button label="单选项">单选项</el-radio-button>
            <el-radio-button label="多选项">多选项</el-radio-button>
            <el-radio-button label="填空项">填空项</el-radio-button>
            <el-button @click="submitOption" type="success" class="right-submit"
              >提交本题</el-button
            >
          </el-radio-group>
        </div>
        <div class="right-ques-title">
          <div>题干：</div>
          <div class="right-ques-text">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="20"
              show-word-limit
            >
            </el-input>
            <div class="min-ques-text" v-show="textarea.length < 1">
              请输入题干
            </div>
          </div>
        </div>

        <!-- 题 -->
        <div class="right-ques-options">
          <div v-if="radioSort != '填空项'">
            选项：<span>添加或删除选项</span>
          </div>
          <!-- 填空题 -->
          <template v-if="radioSort == '填空项'">
            <div class="right-ques-options-one">
              <div class="one-name">输入框</div>
              <div class="right-ques-text">
                <el-input
                  type="textarea"
                  :rows="2"
                  class="one-input"
                  placeholder="无需输入"
                  v-model="optionLabel"
                  disabled
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <!-- <div class="min-ques-opt" v-show="optionLabel.length < 1">
                  请输入内容
                </div> -->
              </div>

              <!-- <div class="one-icon" v-if="optionOne.length - 1 == index">
                <i
                  @click="optionDelect(index)"
                  class="el-icon-delete-solid"
                  style="cursor:pointer;"
                ></i>
              </div>
              <div class="one-icon" v-if="optionOne.length - 1 == index">
                <i
                  @click="optionAdd"
                  class="el-icon-plus"
                  style="cursor:pointer;"
                ></i>
              </div> -->
            </div>
          </template>
          <!-- 单选多选题 -->
          <template v-else>
            <div
              class="right-ques-options-one"
              v-for="(item, index) in optionOne"
              :key="index"
            >
              <div class="one-name">{{ item.pick }}</div>
              <div class="right-ques-text">
                <el-input
                  type="textarea"
                  :rows="2"
                  class="one-input"
                  placeholder="请输入内容"
                  v-model="item.pickText"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
                <div class="min-ques-opt" v-show="item.pickText < 1">
                  请输入内容
                </div>
              </div>
              <div class="one-icon" v-if="optionOne.length - 1 == index">
                <i
                  @click="optionDelect(index)"
                  class="el-icon-delete-solid"
                  style="cursor:pointer;"
                ></i>
              </div>
              <div class="one-icon" v-if="optionOne.length - 1 == index">
                <i
                  @click="optionAdd"
                  class="el-icon-plus"
                  style="cursor:pointer;"
                ></i>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: false,
      optLastResult: true,
      title: "", //问卷标题
      textarea: "", //题干
      // optionText: "",
      radioSort: "单选项",
      optionNormal: [
        {
          pick: "A",
          pickText: "",
        },
        {
          pick: "B",
          pickText: "",
        },
        {
          pick: "C",
          pickText: "",
        },
        {
          pick: "D",
          pickText: "",
        },
      ],
      //单选,多选项
      optionOne: [
        {
          pick: "A",
          pickText: "",
        },
        {
          pick: "B",
          pickText: "",
        },
        {
          pick: "C",
          pickText: "",
        },
        {
          pick: "D",
          pickText: "",
        },
      ],
      //填空项
      optionLabel: "",
      //全部单选，多选项
      optionOneAll: [],
    };
  },
  methods: {
    //标题检验，提交时
    labelTest() {
      if (this.optionOneAll.length < 1) {
        this.$message.error("请至少输入一项问卷内容");
        return false;
      } else {
        if (this.title.length < 3 || this.title.length > 15) {
          this.showTitle = true;
          this.$message.error("请检查标题是否填写！");
          return false;
        } else {
          this.showTitle = false;
          return true;
        }
      }
    },
    // 题目检验，单选多选，题干
    optionTest() {
      //  let lastResult = false;
      if (this.radioSort == "填空项") {
        // if (this.optionLabel.length < 1) {
        //   return false;
        // }
      } else {
        for (let i in this.optionOne) {
          // let lastResult = false;
          if (this.optionOne[i].pickText.length < 1) {
            this.optLastResult = false;
            return false;
          } else {
            this.optLastResult = true;
          }
        }
      }

      if (this.textarea.length < 1) {
        return false;
      }
      return this.optLastResult;
    },
    //提交题目
    submitOption() {
      // console.log(this.optionOne);
      if (this.optionTest()) {
        let option = JSON.parse(JSON.stringify(this.optionOne));
        console.log(option);
        let optionId = this.genID(6);
        if (this.radioSort == "单选项") {
          this.optionOneAll.push({
            sort: "单",
            title: this.textarea,
            option_id: optionId,
            optionOne: option,
          });
        } else if (this.radioSort == "多选项") {
          this.optionOneAll.push({
            sort: "多",
            option_id: optionId,
            title: this.textarea,
            optionOne: option,
          });
        } else {
          this.optionOneAll.push({
            sort: "填",
            title: this.textarea,
            option_id: optionId,
            optionOne: this.optionLabel,
          });
        }
        this.textarea = "";
        this.optionLabel = "";
        for (let i in this.optionOne) {
          this.optionOne[i].pickText = "";
        }
        console.log(this.optionOneAll);
      } else {
        this.$message.error("请检查题目项是否填写完毕！");
      }
    },
    genID(length) {
      return Number(
        Math.random()
          .toString()
          .substr(3, length) + Date.now()
      ).toString(36);
    },
    //提交
    sendData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        this.$request({
          url: "/add_ques_con_list",
          method: "POST",
          data: {
            name: this.title,
            optionOneAll: this.optionOneAll,
          },
        })
          .then((res) => {
            // console.log(res.data); //res中含有请求的data等数据
            // let data = JSON.parse(res.data.data[0].options);
            // console.log(data);
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    quesReport() {
      // this.labelTest();
      // console.log(555);

      if (this.labelTest()) {
        console.log(555);

        this.$confirm("请确认提交问卷调查, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.sendData().then(() => {
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/home/community-ques/ques-list",
                });
              }, 1000);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      }
      // else {
      //   this.$message.error("请检查标题是否填写！");
      // }
      // if (this.title.length < 3 || this.title.length > 15) {
      //   this.showTitle = true;
      //   // setTimeout(() => {
      //   //   this.quesReport();
      //   // }, 500);
      // } else {
      //   this.showTitle = false;
      // }
    },
    radioName() {
      console.log(this.radioSort);
    },
    optionDelect(index) {
      if (this.optionOne.length > 1) {
        this.optionOne.pop(); // 删除最后一个元素
      }
      console.log(index);
    },
    optionAdd() {
      if (this.optionOne.length < 6) {
        let option = String.fromCharCode(
          this.optionOne[this.optionOne.length - 1].pick.charCodeAt(0) + 1
        );
        this.optionOne.push({ pick: option, pickText: "" });
      }
      // let option = String.fromCharCode(
      //   this.optionOne[this.optionOne.length - 1].pick.charCodeAt(0) + 1
      // );
      // this.optionOne.push({ pick: option, pickText: "" });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.ques-report {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #606266;

  .ques-report-title {
    background-color: #fff;
    // height: 20px;

    .title-text {
      font-size: 18px;
      // padding: 20px;
      height: 70px;
      line-height: 80px;
      padding: 0 20px;
      position: relative;
      // @include center;
      display: flex;
      align-items: center;
      .input-write {
        // padding-top: 10px;
        width: 30%;
        .el-input__inner {
          height: 35px;
        }
      }
      .min-prompt {
        position: absolute;
        color: #f56c6c;
        height: 0px;
        font-size: 12px;
        top: 22px;
        left: 120px;
        // margin-left: 100px;
        // padding-top: 5px;
        // box-sizing: border-box;
      }
      .right-report {
        position: absolute;
        right: 100px;
        // line-height: 70px;
        padding-left: 35px;
        padding-right: 35px;
      }
    }
  }
  .ques-report-content {
    margin-top: 35px;
    display: flex;
    .ques-content-left {
      width: 300px;
      height: 100vh;
      background-color: #fff;
      border: 1px solid rgb(216, 216, 216);
      .ques-sort {
        padding: 7px 8px;
      }
      .ques-option {
        padding: 7px 15px;
        background-color: rgb(245, 241, 241);
      }
    }
    .ques-content-right {
      margin-left: 30px;
      background-color: #fff;
      flex: 1;
      border: 1px solid rgb(216, 216, 216);
      .min-ques-text {
        color: #f56c6c;
        font-size: 12px;
        // margin-left: 100px;
        padding-top: 5px;
        box-sizing: border-box;
      }
      .min-ques-opt {
        color: #f56c6c;
        font-size: 12px;
        margin-left: 18px;
        padding-top: 5px;
        box-sizing: border-box;
      }
      .right-sort {
        position: relative;
        padding: 20px;
        border-bottom: 1px solid rgb(216, 216, 216);
        .right-submit {
          position: absolute;
          right: 100px;
          padding-left: 35px;
          padding-right: 35px;
          // letter-spacing: 5px;
        }
      }

      .right-ques-title {
        padding: 20px;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px dashed rgb(216, 216, 216);
      }
      .right-ques-text {
        width: 80%;
      }
      .right-ques-options {
        // width: 85%;
        padding: 20px;
        width: 100%;
        margin-bottom: 30px;
        // display: flex;
        box-sizing: border-box;
        span:first-child {
          font-size: 12px;
          color: rgba(245, 58, 58, 0.993);
        }
        .right-ques-options-one {
          display: flex;
          padding: 20px;
          box-sizing: border-box;
          .one-name {
            @include center;
          }
          .one-input {
            margin-left: 18px;
          }
          .one-icon {
            margin-left: 30px;
            color: rgb(100, 189, 41);
            font-size: 20px;
            @include center;
          }
          .one-icon:last-child {
            margin-left: 10px;
            color: rgb(100, 189, 41);
            font-size: 20px;
            @include center;
          }
        }
      }
    }
  }
}
</style>
